<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="姓名" v-show="isAdmin()" prop="username">
          <el-input
            v-model="queryParams.username"
            placeholder="请输入姓名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="开始时间" prop="morning">
          <el-date-picker
            v-model="queryParams.morning"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="afternoon">
          <el-date-picker
            v-model="queryParams.afternoon"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button icon="el-icon-time" size="medium" v-if="!isAdmin()" @click="upWorkCheck()"  :disabled="hasMorningCheck">上班打卡</el-button>
          <el-button icon="el-icon-time" size="medium" v-if="!isAdmin()" @click="downWorkCheck()" :disabled="hasAfternoonCheck">下班打卡</el-button>
        </el-form-item>
      </el-form>
      <el-card v-show="!isAdmin()">总天数:30 打卡天数:{{this.totalCheck}} 迟到次数:{{this.later}} 早退次数:{{this.later}} 缺勤:{{30 - this.totalCheck}}</el-card>
      <el-table v-loading="loading" :data="formList">
        <el-table-column label="ID" align="center" prop="id" />
        <el-table-column label="姓名" align="center" prop="username" />
        <el-table-column label="上午" align="center" prop="morning" />
        <el-table-column label="下午" align="center" prop="afternoon" />
        <el-table-column label="状态" align="center" prop="checkStatus">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.check_status" :value="scope.row.checkStatus"/>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

</template>

<script>
import store from "@/store";
import {insertUpCheck, listCheckInfo, upDownCheck} from "@/api/system/checkIn";
import {Message} from "element-ui";
export default {
  name: "",
  dicts:['check_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      formList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //上午是否禁用打卡
      hasMorningCheck:false,
      //下午是否禁用打卡
      hasAfternoonCheck:true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        username: null,
        morning: null,
        afternoon:null,
        checkStatus: null
      },
      // 表单参数
      form: {},
      //打卡天数
      totalCheck:0,
      //迟到次数
      later:0,
      //早退次数
      leaveEarly:0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //初始化搜索
    getList(){
      //管理员权限
      if (this.isAdmin()){
        listCheckInfo(this.queryParams).then(res=>{
          this.formList = res.rows
          this.total = res.total
          Message.success("查询成功")
          this.loading=false
          return false
        }).catch(error=>{
          Message.warning("出错了,请联系管理员")
        })
      }else {
      this.form.username = store.getters.name
        this.later = 0
        this.totalCheck = 0
        this.leaveEarly = 0
      listCheckInfo(this.form).then(res=>{
        this.formList = res.rows
        this.total = res.total
        Message.success("查询成功")
        this.loading=false
        const today = new Date().toLocaleDateString()
        this.formList.forEach(item=>{
          const getMorning = new Date(item.morning).toLocaleDateString()
          const getAfternoon = new Date(item.afternoon).toLocaleDateString()
          if (getMorning === today){
            //上午有打卡记录就禁用打卡
            this.hasMorningCheck = true
            if (getAfternoon !== today){
              //下午没用打卡记录就开启打卡
              this.hasAfternoonCheck = false
            }
          }
        })
        this.countNum()
        if (this.hasMorningCheck === false) {
          this.$confirm(
            '今日还未打卡,请注意打卡时间', // 警告框内容
            '警告', // 标题
            {
              confirmButtonText: '知道了', // 确定按钮文本
              showCancelButton: false, // 隐藏取消按钮（关键）
              type: 'warning', // 警告框类型（warning/info/error/success）
              center: true // 文字居中（可选）
            }
          ).then(() => {
            this.loading = false;
          })
        }
        }).catch(error=>{
        Message.warning("出错了,请联系管理员")
      })
      }
    },
    //统计
    countNum(){
      this.formList.forEach(item=>{
        //总打卡天数
        this.totalCheck += 1
        //早退次数
        if (item.checkStatus === 2){
          this.leaveEarly +=1
        }
        //迟到次数
        if (item.checkStatus === 1){
          this.later += 1
        }
      })
    },
    //搜索
    handleQuery(){
      this.getList()
    },
    //重置搜索
    resetQuery(){
      this.queryParams={
        username: null,
        morning: null,
        afternoon: null,
        checkStatus: null
      }
      this.getList()
    },
    //判断是否为管理员
    isAdmin(){
      const userRole = store.getters.roles[0]
      return userRole === 'admin';

    },
    //上班打卡
    upWorkCheck(){
        this.single=false
      this.queryParams.username = store.getters.name
      insertUpCheck(this.queryParams).then(res=>{
        if (res !== 0){
          Message.success("打卡成功")
          this.hasMorningCheck = true
          this.hasAfternoonCheck = false
          this.getList()
          return true
        }
        Message.warning("打卡失败")
      }).catch(error=>{
        Message.warning("出错了,请重试")
      })
    },
    //下班打卡
    downWorkCheck(){
      this.queryParams.username = store.getters.name
        upDownCheck(this.queryParams).then(res=>{
          if (res!==0){
            Message.success("打卡成功")
            this.hasAfternoonCheck=true
            this.getList()
            return true
          }
        }).catch(error=>{
          Message.warning("打卡失败")
        })
    }

  }
}
</script>

<style scoped lang="scss">

</style>
